// 路由组件使用
import { createRoot } from 'react-dom/client';
import { Routes, Route, HashRouter, Link, Navigate } from 'react-router-dom'; // BrowserRouter
import App from './App.tsx';
import './index.css';

const Demo = () => {
  return <div>路由组件Demo</div>;
};

const Vite = () => {
  // ..表示回到上级目录
  return (
    <div>
      Vite <Link to='..'>Back</Link>
    </div>
  );
};

const Test = () => {
  return (
    <div>
      这是test组件 <Navigate to='/demo' />
    </div>
  );
};

const ErrorPage = () => {
  return (
    <div>
      404 Not Found
      <Link to='/'>Back</Link>
    </div>
  );
};

// BrowserRouter 为history模式
// HashRouter  为hash模式
/*
`history`模式 (前台页面一般用这种模式，面向客户的页面)
history:createWebHistory(), //history模式
优点：`URL`更加美观，不带有`#`，更接近传统的网站`URL`。
缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有`404`错误。

`hash`模式 (后台页面一般用这种模式，面向开发者的页面)
history:createWebHashHistory(), //hash模式
优点：兼容性更好，因为不需要服务器端处理路径。
缺点：`URL`带有`#`不太美观，且在`SEO`优化方面相对较差。
*/
createRoot(document.getElementById('root')!).render(
  // <BrowserRouter>
  //   <Routes>
  //     <Route path='/' element={<App />} />
  //     <Route path='/demo' element={<Demo />} />
  //   </Routes>
  // </BrowserRouter>
  <HashRouter>
    <Routes>
      <Route path='/' element={<App />} />
      <Route path='/demo' element={<Demo />} />
      <Route path='/vite' element={<Vite />} />
      <Route path='/test' element={<Test />} />

      {/* 不存在的路由地址重定向 */}
      <Route path='/*' element={<ErrorPage />} />
    </Routes>
  </HashRouter>
);
